<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading" v-cloak>
        <el-tabs :stretch="true" v-model="activeTab">
            <el-tab-pane label="基础" name="base">
                <el-form-item label="数据来源">
                    <el-radio v-model="module.data.dataFrom" label="ids">手动挑选</el-radio>
                    <el-radio v-model="module.data.dataFrom" label="auto">条件筛选</el-radio>
                </el-form-item>

                <transfer v-if="module.data.dataFrom === 'ids'" :titles="['待选顾问', '已选顾问']" :data="allBrokers"
                    v-model="brokerIds" :props="{ key: 'id', label: 'name' }" />

                <template v-if="module.data.dataFrom === 'auto'">
                    <el-form-item label="指定厂房">
                        <post-selector v-model="module.data.filter.post_id"></post-selector>
                    </el-form-item>

                    <el-form-item label="指定等级">
                        <el-radio-group v-model="module.data.filter.level">
                            <el-radio label="">不限</el-radio>
                            <el-radio label="1">金牌</el-radio>
                            <el-radio label="2">银牌</el-radio>
                            <el-radio label="3">铜牌</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="显示个数">
                        <!-- <el-input type="number" v-model="module.data.filter.limit"></el-input> -->
                        <el-input-number v-model="module.data.filter.limit" :min="1" :max="20"></el-input-number>
                    </el-form-item>
                </template>
            </el-tab-pane>
            <el-tab-pane label="标题" name="header">
                <header-editor :module="module.header" v-if="module.header"></header-editor>
            </el-tab-pane>
            <el-tab-pane label="样式" name="style">
                <el-form-item label="风格">
                    <ul class="style-items">
                        <li @click="styleChangeHandle(item.value)" :class="{
                            'style-item': true,
                            active: module.data.styleName == item.value,
                        }" v-for="(item, i) in styleItems" :key="i">
                            <el-image style="height: 100%" :src="require('@/assets/images/pagemaker/brokers-style/style-' +
                                item.value +
                                '.png')
                                "></el-image>
                        </li>
                    </ul>
                </el-form-item>

                <module-style-editor :module="module" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from "vuex";
import Transfer from "@/components/Transfer";
import ModuleStyleEditor from "../ModuleStyleEditor/Index";
import { getBrokerProfileList } from "@/api/user";
import LinkEditor from "@/components/LinkEditor";
import HeaderEditor from "../base/HeaderEditor";
export default {
    data () {
        return {
            predefineColors: [
                "#ffffff",
                "#f9f9f9",
                "#f4f4f4",
                "#cecece",
                "#999999",
                "#1989fa",
                "#000000",
            ],
            activeTab: "base",
            allBrokers: [],
            loading: false,
            // 样式选项
            styleItems: [
                { name: "style-0", value: 0 },
                { name: "style-1", value: 1 },
            ],
        };
    },
    watch: {},
    components: {
        Transfer,
        ModuleStyleEditor,
        HeaderEditor,
        LinkEditor,
    },
    props: {
        module: { type: Object, default: null },
    },

    mounted: function () {
        this.loadAllBrokers();
    },

    computed: {
        ...mapGetters(["myconfig"]),
        brokerIds: {
            get () {
                return this.module.items
            },
            set (ids) {
                Vue.set(this.module, 'items', ids)
            }
        },
    },

    methods: {
        styleChangeHandle: function (val) {
            this.$set(this.module.data, "styleName", val);
        },

        loadAllBrokers: function (g) {
            this.loading = true;
            this.allBrokers = [];
            var query = {
                per_page: 99999,
                order: "id desc",
                page: 1,
            };
            getBrokerProfileList(query).then((resp) => {
                this.allBrokers = resp.data.result;
                this.loading = false;
            });
        },
    },
};
</script>

<style scoped>
.form-attrs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.form-attrs .attr-label {
    margin-left: 10px;
}

.form-attrs .attr-label:first-child {
    margin-left: 0;
}

.style-items {
    margin: 10px 0 10px 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    user-select: none;
}

.style-items .style-item {
    width: 100px;
    box-shadow: 0 2px 17px 3px rgba(207, 221, 213, 0.35);
    border-radius: 3px;
    border: 1px solid #f1f1f1;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.style-items .style-item:nth-child(3n) {
    margin-right: 0;
}

.style-items .style-item:hover {
    box-shadow: 0 2px 17px 3px rgba(207, 221, 213, 0.6);
}

.style-items .style-item.active {
    border: 1px solid #1989fa;
    box-shadow: none;
}
</style>
